<template>
  <div>
    <el-form ref="payRef" :inline="true" :model="payCl.pays">
      <el-form-item label="名称：" prop="name">
        <el-input v-model="payCl.pays.name" placeholder="名称" type="text"></el-input>
      </el-form-item>
      <el-form-item label="用户类型" prop="type">
        <el-select v-model="payCl.pays.userType" placeholder="用户类型">
          <el-option v-for="item in payCl.userType" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search()">搜索</el-button>
        <el-button type="primary" @click="resetS(payRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-button type="primary" @click="opendialog()">
          <el-icon>
            <Plus />
          </el-icon>
          添加支付方式
        </el-button>
      </el-col>
    </el-row>
  </div>
  <div>
    <el-table :data="payCl.payTables" stripe style="width: 100%">
      <el-table-column align="center" label="序号" type="index" width="80">
        <template #default="scope">
          {{ (payCl.pays.page - 1) * payCl.pays.size + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column align="center" header-align="center" label="名称" prop="name" />
      <el-table-column align="center" header-align="center" label="编码" prop="code" />
      <el-table-column align="center" header-align="center" label="支付端" prop="userType">
        <template #default="scope">
          <span v-if="scope.row.userType">
            {{ scope.row.userType.map(s => s.desc).join('/') }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" header-align="center" label="状态" prop="stop">
        <template #default="scope">
          <el-switch v-model="scope.row.stop" :active-value="false" :inactive-value="true" active-text="是" inactive-text="否" inline-prompt @change="chengStop(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column align="center" header-align="center" label="创建时间" prop="createTime" width="180" />
      <el-table-column align="center" fixed="right" header-align="center" label="操作" width="220">
        <template #default="scope">
          <el-button link size="small" type="primary" @click="toEdit(scope.row.id)">编辑 </el-button>
          <el-button link size="small" type="primary" @click="addConfig(scope.row.id)">添加支付配置 </el-button>
          <el-popconfirm title="确定要删除吗?" @confirm="deletePays(scope.row.id)">
            <template #reference>
              <el-button link type="primary">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div>
    <el-dialog v-model="payCl.payDialog" title="添加支付方式" destroy-on-close @close="resetE(editRef)">
      <el-form ref="editRef" :model="payCl.payEdit" :rules="payCl.payRule">
        <el-row :gutter="10" class="row-bg">
          <el-col :span="12">
            <el-form-item label="名字" prop="name">
              <el-input v-model="payCl.payEdit.name" autocomplete="off" placeholder="名字" type="text" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="编码" prop="code">
              <el-input v-model="payCl.payEdit.code" autocomplete="off" placeholder="编码" type="text" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="用户类型" prop="userType">
              <el-select v-model="payCl.payEdit.userType" multiple placeholder="用户类型">
                <el-option v-for="item in payCl.userType" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="排序" prop="sort">
              <el-input-number v-model="payCl.payEdit.sort" :max="10000" :min="0" :step="1" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="图标：" prop="icon">
              <ImgUpload v-model:file_url="payCl.payEdit.icon" :file_max="1" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <Editor v-model:editorValue="payCl.payEdit.remark"></Editor>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" @click="save">保存 </el-button>
          <el-button @click="payCl.payDialog = false">取消 </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
  <div>
    <el-dialog v-model="payCl.payConfigDialog" destroy-on-close title="添加支付配置" @close="resetPayConfig(payConfigRef)">
      <el-form ref="payConfigRef" :model="payCl.payConfigEdit" :rules="payCl.payConfigRule">
        <span v-for="(item, index) in payCl.payConfigDetails" :key="index">
          <el-row :gutter="10" class="row-bg">
            <el-col :span="7">
              <el-form-item label="父配置">
                <el-select v-model="item.pid" placeholder="用户类型">
                  <el-option v-for="item in payCl.payConfigDetails" :key="item.configKey" :label="item.configKey" :value="item.id" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="名称">
                <el-input v-model="item.configKey" placeholder="支付配置名称" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="值">
                <el-input v-model="item.configValue" placeholder="支付配置值" />
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item>
                <el-button @click="addPayDetails(index)"
                  ><el-icon><Plus /></el-icon
                ></el-button>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item>
                <el-button @click="removePayDetails(index)"
                  ><el-icon><Minus /></el-icon
                ></el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </span>
        <el-form-item>
          <el-button type="primary" @click="editPayConfigDetails">保存 </el-button>
          <el-button @click="payCl.payConfigDialog = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
  <Page :pageData="payCl.pays" @selectPage="search"></Page>
</template>
<script lang="ts" setup>
import { payClass } from '@/page/types/pay/pay'
import { ElMessage, FormInstance } from 'element-plus/es'
import { addPay, updatePay, pagePay, deletePay, detailPay, addConfigs, getConfigs } from '@/api/pay'
import Editor from '@/components/MyEditor.vue'
import ImgUpload from '@/components/ImgsUpload.vue'
const payCl = reactive(new payClass())
const payRef = ref()
const editRef = ref()
const payConfigRef = ref()
const search = () => {
  pagePay(payCl.pays).then(res => {
    payCl.payTables = res.data.records
    payCl.pays.page = res.data.current
    payCl.pays.size = res.data.size
    payCl.pays.total = res.data.total
  })
}
const resetE = (form: FormInstance | undefined) => {
  if (!form) return
  form.resetFields()
  payCl.payEdit = {}
}
const opendialog = () => {
  payCl.payDialog = true
}
const resetS = (form: FormInstance | undefined) => {
  if (!form) return
  form.resetFields()
  search()
}
const chengStop = (row: any) => {
  const data = {
    id: row.id,
    stop: row.stop
  }
  updatePay(data).then(res => {
    ElMessage({
      message: row.stop ? '禁用支付方式成功' : '开启支付方式成功',
      type: 'success'
    })
  })
}
const save = () => {
  if (payCl.payEdit.id) {
    updatePay(payCl.payEdit).then(res => {
      ElMessage({
        message: '更新成功',
        type: 'success'
      })
      search()
    })
  } else {
    addPay(payCl.payEdit).then(res => {
      ElMessage({
        message: '添加成功',
        type: 'success'
      })
      search()
    })
  }
  payCl.payDialog = false
}
const toEdit = (id: string) => {
  detailPay(id).then(res => {
    payCl.payDialog = true
    payCl.payEdit = res.data
    payCl.payEdit.userType = payCl.payEdit.userType.map(s => s.name)
  })
}
const deletePays = (id: string) => {
  deletePay(id).then(res => {
    ElMessage({
      message: '删除成功',
      type: 'success'
    })
    search()
  })
}
const resetPayConfig = (form: FormInstance | undefined) => {
  if (!form) return
  form.resetFields()
}
const addConfig = (id: string) => {
  payCl.payId = id
  payCl.payConfigDetails = [
    {
      id: '',
      configKey: '',
      configValue: ''
    }
  ]
  getConfigs(id).then(res => {
    payCl.payConfigDialog = true
    if (res.data && res.data.length > 0) {
      payCl.payConfigDetails = res.data
    }
  })
}
const addPayDetails = (val: number) => {
  payCl.payConfigDetails.push({
    id: '',
    name: '',
    param: ''
  })
}
const editPayConfigDetails = () => {
  addConfigs(payCl.payId, payCl.payConfigDetails).then(res => {
    payCl.payConfigDialog = false
    ElMessage({
      message: '添加支付配置成功',
      type: 'success'
    })
  })
}
const removePayDetails = (index: number) => {
  if (index === 0) return
  payCl.payConfigDetails[index] = null
  payCl.payConfigDetails = payCl.payConfigDetails.filter(i => i)
}
onMounted(() => {
  search()
})
</script>
<style lang="scss" scoped>
.el-select {
  width: 200px;
}
</style>
